// 进入页面，获取后端数据动态渲染商品图片
function showProduct() {
    // 先获取url的id 
    let path = location.href
    let index = path.indexOf('=')
    let id = path.substring(index + 1, path.length)
    axios({
        metod: 'GET',
        url: 'http://api.yuguoxy.com/api/shop/find',
        params: {
            id
        }
    }).then(response => {
            let data = response.data
            if (data.resultCode == 1) {
                let list = data.resultInfo.list
                console.log(list);
                let thisProduct = data.resultInfo
                // showPic.attr('src', data.resultInfo.picture)
                // bigPic.attr('src', data.resultInfo.picture)
                let left = `<div class="lef wraper-l">
            <div class="show-box">
                <img src="${data.resultInfo.picture}" alt="showbox">
                <div class="mask" style="display:none"></div>
            </div>
            <ul>`
                let center = list.map(item => {
                    return `<li class="active"><img src="${item}" alt="smail1"></li>`
                }).join('')
                let right = ` </ul>
            </div>
            <div class="rig wraper-r">
                <div>
                    <p class="productName">${data.resultInfo.shop}</p>
                        <p class="oldPrice">原价￥：<span>${data.resultInfo.oldprice}</span></p>
                        <p class="newPrice">折扣价￥：<span>${data.resultInfo.price}</span></p>
                    <p class="goBuy"><span><a href="#">去淘宝买</a></span></p>
                    <p class="addCart">加入购物车</p>
                    <img src="${data.resultInfo.picture}" alt="" class="backGould" style="display:none">
                </div>
            </div>`
                // style="display:none"
                let str = left + center + right

                $('.wraper').html(str)

                // 点击li,设置图片

                onCart(thisProduct)

            }

            onTab()
            glass()

        }

    )
}
// tab切换
function onTab() {

    let bigPic = $('.backGould') //背景图片
    let showPic = $('.show-box>img') /* show图片 */
    var lis = $('ul>li')
    lis.on('click', function (e) {
        e = e
        let target = e.target
        let url = $(target).attr('src')
        showPic.attr('src', url)
        bigPic.attr('src', url)

    })
    onClear()

}

//设置选中效果 
function onClear() {
    let li = $('ul>li')
    $('ul>li').on('click', function () {
        $('ul>li').removeClass('active')
        $(this).addClass('active')
    })
}


// 放大镜
/**
    放大镜效果
       遮罩层随光标移动而移动，右边大图反方向运行
         1. 遮罩层随光标移动而移动
            绑定光标在显示盒子中的移动事件mousemove
            获取光标相对自身的位置复制给遮罩层

         2. 右边大图反方向运行
			计算比例
				图片比例
				移动距离比例

 */
function glass() {
    let showBox = document.querySelector('.show-box') //showbox
    let mask = document.querySelector('.show-box>.mask') //mask
    let glassBox = document.querySelector('.wraper-r') //大盒子
    let bigPic = document.querySelector('.wraper-r img') //背景图
    // show box 鼠标 的移动事件
    showBox.addEventListener('mousemove', function (e) {
        e = e || window.event
        let x = e.offsetX - mask.clientWidth / 2
        let y = e.offsetY - mask.clientHeight / 2
        //边界检查
        if (x < 0) {
            x = 0
        }
        if (x > showBox.clientWidth - mask.clientWidth) {
            x = showBox.clientWidth - mask.clientWidth
        }
        if (y < 0) {
            y = 0
        }
        if (y > showBox.clientHeight - mask.clientHeight) {
            y = showBox.clientHeight - mask.clientHeight
        }

        mask.style.left = x + 'px'
        mask.style.top = y + 'px'
        /**
         * 初始化比例
         *   遮罩层      放大镜
         *  ------- =  ------------
         *  显示盒子     背景图
         *    背景图 = 放大镜*显示盒子/遮罩层
         *
         */
        // 初始比例，重设背景图宽高
        let w = (glassBox.clientWidth * showBox.clientWidth) / mask.clientWidth
        let h = (glassBox.clientHeight * showBox.clientHeight) / mask.clientHeight
        bigPic.style.width = w + 'px'
        bigPic.style.height = h + 'px'

        /**
            //          * 计算移动比例
            //          *   遮罩层移动距离        遮罩层
            //          *  -------------- = -----------------
            //          *   背景图移距离          放大镜
            //          *  背景图移距离X = 遮罩层移动距离x * 放大镜w/遮罩层w
            //          *  背景图移距离y = 遮罩层移动距离y * 放大镜h/遮罩层h
            //          *
            //          */

        let moveX = (x * glassBox.clientWidth) / mask.clientWidth
        let moveY = (y * glassBox.clientHeight) / mask.clientHeight
        bigPic.style.left = `${-moveX}px`
        bigPic.style.top = `${-moveY}px`





    })
    // 鼠标移入显示放大镜
    showBox.addEventListener('mouseover', () => {
        mask.style.display = 'block' //显示
        bigPic.style.display = 'block'

    })
    // 鼠标移除隐藏放大镜
    showBox.addEventListener('mouseout', () => {
        mask.style.display = 'none' //隐藏
        bigPic.style.display = 'none'

    })




    // }
    // /**
    //  * 选项切换
    //  * 点击选项小图时，显示盒子图片和背景图片切换为相应图片
    //  *   分析: 1. 获取所有选项，绑定点击事件
    //  *         2.显示盒子图片和背景图片切换为相应图片
    //  */
    // onTab() {
    //     let that = this // 保存当前glass放大镜对象到that变量中
    //     for (let i = 0; i < this.uls.length; i++) {
    //         this.uls[i].addEventListener('click', function () {
    //             //清除原来选中效果
    //             that.onClear()
    //             //设置当前选项效果
    //             this.classList.add('active')

    //             //显示盒子图片和背景图片切换为相应图片
    //             that.showImg.setAttribute('src', `./image/show_${i+1}.jpg`)
    //             that.bigPic.setAttribute('src', `./image/big_${i+1}.jpg`)
    //         })
    //     }
    // }

    // /**
    //  * 清除所有选项选中效果
    //  */
    // onClear() {
    //     for (let i = 0; i < this.uls.length; i++) {
    //         this.uls[i].classList.remove('active')
    //     }
    // }
    // }
}

/**
 * 点击添加到购物车
 *  本地存储
 *  
 */
function onCart(thisProduct) {
    // 先点击跳转到cart
    $('.addCart').on('click', function (e) {
        e = e
        e.preventDefault()
        // 先获取本地数据，然后将商品添加到购物车
        let ProductListStr = localStorage.getItem('carts')
        let ProductList = JSON.parse(ProductListStr) || []

        // 新建这个商品
        let product = {
            id: thisProduct.id,
            url: thisProduct.picture,
            name: thisProduct.product,
            price: thisProduct.price,
            num: 1,
            singleprice: 0,
            state: false, //状态

        }
        // 如果存在，则num++
        let str = ProductList.find(item => item.id == product.id)
        console.log(str);
        // 如果str在 ProductList里面，则str.num++
        if (str) { //str存在则为TRUE！！！
            str.num++
        } else {
            ProductList.push(product)
        }
        localStorage.setItem('carts', JSON.stringify(ProductList))
        alert('添加成功')


    })
}
// 点击购物车，跳转页面
function onGocart() {
    $('.goCart').on('click', function () {
        location.href = './cart.html'

    })
}
// 点击首页，跳转页面
function onGoIndex() {
    $('.goIndex').on('click', function () {
        location.href = './index.html'

    })
}

onGoIndex()
onGocart()
showProduct()